<template>
  <div class="w-screen h-screen">
    <van-nav-bar left-arrow @click="onClickLeft">
      <template #right>
        <span class="text-xs text-gray-400"></span>
      </template>
    </van-nav-bar>
    <h1 class="text-2xl font-blod text-center my-10">登录</h1>
    <van-form @submit="onSubmit" model="params">
      <van-cell-group inset>
        <van-field
          v-model="params.username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="params.password"
          name="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
      </van-cell-group>
      <div class="mt-4 mx-4">
        <van-button round block native-type="submit">登录</van-button>
      </div>
      <div class="text-center my-3" @click="toRegister">
        新用户？点击这里注册
      </div>
      <span class="text-ms ml-4 text-[#e6723c]">请先同意必选条款</span>
      <van-field name="checkbox">
        <template #input>
          <van-checkbox v-model="checked" shape="square">
            <span class="text-xs ml-2"
              >(必选)我同意<a href="#">《用户协议》</a>和<a href="#"
                >《使用条款》</a
              ></span
            >
          </van-checkbox>
        </template>
      </van-field>
    </van-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "../api/index";

const router = useRouter();

const onClickLeft = () => {
  router.push("/home");
};
const toRegister = () => {
  router.push("/register");
};

const onSubmit = async (params: LoginInfo) => {
  console.log(params); // 像后端发请求，将账号密码传给后端
  const res = await axios.post("/user/login", params);
  console.log(res);
  localStorage.setItem("userInfo", JSON.stringify(res.data));
  localStorage.setItem("token", res.token);
  router.push("./home");
};
// vant 表单 验证
// ts 类型约束
// 记住我
// 就这个地方用
// interface 接口 约束
// type
interface LoginInfo {
  username: string;
  password: string;
}

const params = reactive<LoginInfo>({
  username: "",
  password: "",
});

const checked = ref<boolean>(false);
</script>
<style scoped>
:deep(.van-icon-arrow-left) {
  @apply text-2xl text-black;
}
:deep(.van-checkbox__icon--checked .van-icon) {
  @apply bg-[#e6723c] border-[#e6723c];
}
</style>
